<script setup>
/**
 * 前端项目应用
 */
import { ref, toRefs, watch, markRaw, defineAsyncComponent } from 'vue'
import module from './module.vue';

const vueFiles = import.meta.glob(`/src/pages/diymobile/**/module.vue`);
// views对象
const views = ref({});
for (const [key, promise] of Object.entries(vueFiles)) {
    const fileName = key.split('/').slice(-2)[0];
    // 将组件转换为异步组件并标记为原始对象（防止复用带来的副作用）
    views.value[fileName] = markRaw(defineAsyncComponent(() => promise()));
}

const props = defineProps({
    title: String,
    form: {
        type: Object,
        default: {}
    }
});
//需要响应式时使用toRefs
//const { title, form } = toRefs(props);
const mobileConfig = ref([]);

//监听变化
watch(() => props.form, (newVal, oldValue) => {
    mobileConfig.value = newVal.template||[]
},{
    immediate: true, // 组件创建时立即执行
    deep: true // 深度监听
})


</script>
<template>
    <div class="m-container" :style="{
        minHeight: '100%',
        color: form.color,
        backgroundColor: form.backgroundColor,
        backgroundImage: `url(${form.bg})`
    }">
        <module :config="form" v-model="mobileConfig" :views="views"></module>
    </div>

</template>

<style>
/* 前端共用css START */
.rowspace{height: 0;margin: 0;padding: 0;overflow: hidden;}
.itemrow{
	width: 100%;margin: 0 auto;padding: 5px 10px;
	position: relative; background-size: 100% auto;background-repeat: no-repeat;
}
.m-container{
    position: relative; background-size: 100% auto;background-repeat: no-repeat;min-height: 20px;
    display: flex;
    flex-wrap:wrap;/*换行*/
    justify-content: space-evenly;
    align-items : flex-start;
    align-content: flex-start;
}
/* 前端共用css END */
</style>